<template>
    <!-- 如果 route 有 children，则渲染为 el-sub-menu -->
    <el-sub-menu v-if="hasChildren" :index="route.path">
        <template #title>
            <el-icon :class="route.meta.icon" />
            <span>{{ route.meta.title }}</span>
        </template>
        <!-- 递归渲染子项 -->
        <MenuItem v-for="child in route.children" :key="child.path" :route="child" />
    </el-sub-menu>

    <!-- 如果没有 children，则渲染为 el-menu-item -->
    <el-menu-item v-else :index="route.path">
        <el-icon :class="route.meta.icon" />
        <span>{{ route.meta.title }}</span>
    </el-menu-item>
</template>

<script setup>
import { computed } from 'vue';
defineOptions({
    name: 'MenuItem',
    inheritAttrs: true,
})
const props = defineProps({
    route: {
        type: Object,
        required: true
    }
});


// 检查是否存在子路由
const hasChildren = computed(() => props.route.children && props.route.children.length > 0);
</script>

<style scoped lang="scss"></style>